import { ref, onMounted, toRefs, computed, nextTick } from 'vue'
import { useMapStore } from '@/stores/map' // 使用pinia

export default function useCatalog() {
  const { map } = toRefs(useMapStore())
  const foldCatalog = ref(false)
  const treeRef = ref() // 目录树
  const catalogTree = ref([])
  const defaultProps = {
    children: 'children',
    label: 'label',
  }
  const geoIcon = computed(() => {
    return (type) => {
      switch (type) {
        case 'Reg':
          return './src/assets/images/mian.png'
        case 'Lin':
          return './src/assets/images/xian.png'
        case 'Pnt':
          return './src/assets/images/dian.png'
      }
    }
  })
  onMounted(() => {
    getVectorMapdocInfo()
    // 设为全部选中
  })
  nextTick(() => {
    setTimeout(() => {
      treeRef.value.setCheckedKeys([0, 1, 2, 3, 4], true)
    }, 1500)
  })
  function selectNode(dom, state) {
    // console.log('selectNode', state.checkedNodes)
    /* state.checkedNodes :
          [{id: 2, label: '事件', type: 'layer', vector: 'point', $treeNodeId: 39}]
       获取已选择的图层的id
        // 方法1 arr.forEach
          let layers = layers.substring(0, layers.length-1)
        // 方法2 arr.map  bug: 全选时多了一个逗号
    */
    /* 1. 拿到已选择的图层的id */
    let show = state.checkedNodes
      .map((item) => {
        if (item.type == 'layer') return item.id
      })
      .join(',')
    // console.log(show)
    /* 2. 操作图层显隐: layer.setLayerStatus('0,2,3,4', 'show') */
    let layer = map.value.getLayers().getArray()[3]
    layer.setLayerStatus(show, 'show')
  }

  /* ===矢量地图文档目录服务（获取指定矢量地图文档信息）=== */
  //获取地图文档信息
  function getVectorMapdocInfo() {
    //实例化Zondy.Service.Catalog.MapDoc类，设置操作的地图文档为“WorldJWVector”
    var docCatalog = new Zondy.Catalog.MapDoc({
      ip: 'qyoung.site',
      port: '6163',
      //或获取的地图文档的名称
      docName: 'guanggu',
      //是否返回由DWS所返回的原始格式信息
      returnFullStyle: true,
    })
    //调用getMapDocInfo函数，获取地图文档相关信息，在回调函数中处理结果
    docCatalog.getMapDocInfo(getListSuccess1)
  }
  //获取服务器地图文档列表成功后的回调函数
  function getListSuccess1(data) {
    if (data.succeed) {
      if (data == null) {
        console.log('没有获取到矢量地图文档！')
        return
      } else {
        // console.log('全部返回结果:地图与图层', data.mapInfos)
        // console.log('返回的所有图层信息', JSON.parse(data.mapInfos[0].attribute[0].value))
        // [ { id: '0', lebel: '新地图', children: [{ id: 0, label: '道路' }] } ] // 树形控件的数据源格式
        /* 生成目录树的数据源 */
        data.mapInfos.forEach((map, indexMap) => {
          getLayersInfo(indexMap)
          let item = []
          item.id = indexMap
          item.label = map.name
          item.type = 'map'
          catalogTree.value.push(item)
        })
        // console.log(catalogTree.value)
      }
    } else {
      console.log('获取到矢量地图文档失败！')
      return
    }
  }
  /* ===矢量地图文档目录服务（获取地图中所有图层信息）=== */
  function getLayersInfo(indexMap) {
    var docCatalog = new Zondy.Catalog.MapDoc({
      ip: import.meta.env.VITE_gisURL,
      port: '6163',
      //或获取的地图文档的名称
      docName: 'guanggu',
      //设置地图的索引号
      mapIndex: indexMap,
    })
    docCatalog.getLayersInfo(getListSuccess2) // 回调
  }
  function getListSuccess2(data) {
    if (data.succeed) {
      if (data == null) {
        console.log('没有获取到矢量地图文档！')
        return
      } else {
        catalogTree.value[catalogTree.value.length - 1].children =
          data.value.map((item) => {
            return {
              id: item.LayerIndex,
              label: item.Name,
              type: 'layer',
              geoType: item.GeomType,
            }
          })
      }
    } else {
      console.log('获取到矢量地图文档失败！')
      return
    }
  }
  return {
    foldCatalog,
    treeRef,
    defaultProps,
    catalogTree,
    selectNode,
    geoIcon,
  }
}
